/* 套账信息页面 */
<template>
  <div class="salary-content">
    <!-- 卡片式布局 -->
    <el-card>
      <el-col :span="1">
        <!-- 添加套账按钮 -->
        <el-button
          type="primary"
          style="margin: 10px 0px"
          @click="addDialogVisible = true"
          >添加工资套账</el-button
        >
      </el-col>

      <!-- 表单信息，核心内容，为表单设置背景颜色 -->
      <el-table
        :data="wagelist"
        style="
          width: 100%;
          font-size: 14px;
          color: #606266;
          box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
        "
      >
        <!-- 将启用时间格式化，yy-ss-dd -->
        <el-table-column
          prop="createTime"
          label="启用时间"
          width="100"
          :formatter="dateFormat"
        >
        </el-table-column>

        <!-- 套账名字列 -->
        <el-table-column prop="name" label="套账名称" width="100">
        </el-table-column>

        <!-- 套账基本工资列 -->
        <el-table-column prop="salary" label="基本工资" width="100">
        </el-table-column>

        <!-- 套账交通补助列 -->
        <el-table-column prop="transport" label="交通补助" width="100">
        </el-table-column>

        <!-- 套账午餐补助列 -->
        <el-table-column prop="meal" label="午餐补助" width="100">
        </el-table-column>

        <!-- 养老金列 -->
        <el-table-column label="养老金" width="200" align="center">
          <el-table-column prop="rate" label="比率" width="100">
          </el-table-column>
          <el-table-column prop="percent" label="基数" width="100">
          </el-table-column>
        </el-table-column>

        <!-- 套账医疗保险列 -->
        <el-table-column label="医疗保险" width="200" align="center">
          <el-table-column prop="rate" label="比率" width="100">
          </el-table-column>
          <el-table-column prop="percent" label="基数" width="100">
          </el-table-column>
        </el-table-column>

        <!-- 套账公积金列 -->
        <el-table-column label="公积金" width="200" align="center">
          <el-table-column prop="rate" label="比率" width="100">
          </el-table-column>
          <el-table-column prop="percent" label="基数" width="100">
          </el-table-column>
        </el-table-column>

        <!-- 操作方法，功能均已实现 -->
        <el-table-column label="操作" min-width="10%" align="center">
          <template slot-scope="scope">
            <!--文字提示 enterable 隐藏-->
            <el-tooltip
              effect="dark"
              content="修改信息"
              placement="top-start"
              :enterable="false"
            >
              <!-- 编辑功能按钮 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip
              effect="dark"
              content="删除套账"
              placement="top-start"
              :enterable="false"
            >
              <!-- 删除套账信息方法 参数为行数row行数id，row行数 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(scope.row.id, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 size-change:每页最大变化 current-change：当前页数变化 layout：功能组件 -->
      <div
        class="block"
        style="
          text-align: center;
          margin-top: 15px;
          margin-left: 10px;
          padding: 10px 10px;
        "
      >
        <div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="fromData.pageIndex"
            :page-sizes="pageInfo.pageSizes"
            :page-size="fromData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
            <!-- @size-change：每页显示条数个数点击事件，当切换时动态的切换每页显示的条数
               @current-change：当前页数点击事件
               current-page:当前页码，默认为第一页
               page-sizes：在页面可选择的页码数[1,10,20,50] 
               page-size：每页显示的条数，可以动态的修改
               total：显示的是从后端获得数据的总数  -->
          </el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 添加套账信息对话框区域 -->
    <el-dialog
      center
      title="添加工资套账"
      :visible.sync="addDialogVisible"
      @close="addDialogClosed"
    >
      <el-form
        :model="addInfo"
        label-width="100px"
        :rules="AddFormRules"
        ref="addFormRef"
      >
        <!-- 名称 -->
        <el-form-item label="套账名称" prop="name">
          <el-input v-model="addInfo.name"></el-input>
        </el-form-item>
        <!-- 基本工资 -->
        <el-form-item label="基本工资" prop="salary">
          <el-input v-model="addInfo.salary"></el-input>
        </el-form-item>

        <!-- 交通补助 -->
        <el-form-item label="交通补助" prop="transport">
          <el-input v-model="addInfo.transport"></el-input>
        </el-form-item>
        <!-- 启用时间 -->
        <el-form-item label="启用时间" prop="createTime">
          <el-date-picker
            v-model="addInfo.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 午餐补助 -->
        <el-form-item label="午餐补助" prop="meal">
          <el-input v-model="addInfo.meal"></el-input>
        </el-form-item>
        <!-- 比率 -->
        <el-form-item label="比率" prop="rate">
          <el-input v-model="addInfo.rate"></el-input>
        </el-form-item>
        <!-- 基数 -->
        <el-form-item label="基数" prop="percent">
          <el-input v-model="addInfo.percent"></el-input>
        </el-form-item>
      </el-form>

      <!-- 内容底部区域，两个按钮区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doAddWage">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改套账信息对话框区域 -->
    <el-dialog center title="修改套账信息" :visible.sync="modifyDialogVisible">
      <el-form :model="modifyInfo" label-width="100px">
        <!-- 套账名称 -->
        <el-form-item label="套账名称" prop="name">
          <el-input v-model="modifyInfo.name" disabled></el-input>
        </el-form-item>
        <!-- 基本工资 -->
        <el-form-item label="基本工资" prop="salary">
          <el-input v-model="modifyInfo.salary"></el-input>
        </el-form-item>
        <!-- 交通补助 -->
        <el-form-item label="交通补助" prop="transport">
          <el-input v-model="modifyInfo.transport"></el-input>
        </el-form-item>
        <!-- 启动时间 -->
        <el-form-item label="启用时间" prop="createTime">
          <el-input v-model="modifyInfo.createTime"></el-input>
        </el-form-item>
        <!-- 午餐补助 -->
        <el-form-item label="午餐补助" prop="meal">
          <el-input v-model="modifyInfo.meal"></el-input>
        </el-form-item>
        <!-- 比率 -->
        <el-form-item label="比率" prop="rate">
          <el-input v-model="modifyInfo.rate"></el-input>
        </el-form-item>
        <!-- 基数 -->
        <el-form-item label="基数" prop="percent">
          <el-input v-model="modifyInfo.percent"></el-input>
        </el-form-item>
      </el-form>

      <!-- 内容底部区域，两个按钮区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doModifyWage">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  validateUsername,
  validateAge,
  validatGender,
  validateDepartment,
  validateBirthday,
  validateState,
  validateSalary,
  validateDegree,
} from "@/components/common/validate";
import { list, add, del, update } from "@/api/wage/index"; //引入后端外部接口
export default {
  created() {
    this.queryWageList();
    // loading加载事件
    const loading = this.$loading({
      lock: true, //全屏锁定
      text: "数据加载中......", //输出的文本信息
      spinner: "el-icon-loading", //设置icon
      background: "rgba(0, 0, 0, 0.7)", //设置背景颜色
    }); //setTimeout设置定时器
    setTimeout(() => {
      loading.close();
    }, 1000); /* 设置时间为1秒 */
  },
  data() {
    return {
      wagelist: [], //套账数组对象
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为5，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
      //控制修改Dialog是否显示
      addDialogVisible: false,
      modifyDialogVisible: false,
      // 添加的套账信息
      addInfo: {
        name: "", //套账名字
        salary: "", //套账基本薪水
        transport: "", //套账交通补助
        meal: "", //套账午餐补助
        award: "", //套账奖金
        createTime: "", //套账启用时间
        rate: "", //套账比率
        percent: "", //套账基数
        id: 0, //套账id
      },
      //修改的工资套账信息
      modifyInfo: {
        name: "", //套账名字
        salary: "", //套账基本薪水
        transport: "", //套账交通补助
        meal: "", //套账午餐补助
        award: "", //套账奖金
        createTime: "", //套账启用时间
        rate: "", //套账比率
        percent: "", //套账基数
        id: 0, //套账id
      },
      // 添加套账的验证信息格式
      AddFormRules: {
        name: [
          {
            message: "请输入套账名字",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        salary: [
          {
            required: true,
            trigger: "blur",
          },
        ],
        transport: [
          {
            message: "请输入交通补助",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        meal: [
          {
            message: "请输入午餐补助",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        award: [
          {
            message: "请输入奖金",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        createTime: [
          {
            message: "请选择启用时间",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        rate: [
          {
            message: "请输入比率",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        percent: [
          {
            message: "请输入基数",
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
      },
    };
  },
  methods: {
    // 查询所有套账的list方法
    queryWageList() {
      var $that = this;
      list(this.fromData).then((res) => {
        if (res.code == 200 && res.success == "success") {
          $that.wagelist = res.data.list;
          $that.pageInfo.total = res.data.total;
        }
      });
    },

    //时间进行格式化输出，格式化为yy-mm-dd
    dateFormat: function (row) {
      const dateStr = row.createTime; //获得当前row的值
      if (dateStr != null) {
        let date = new Date(row.createTime); //实例化一个date对象
        let yy = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let dd = date.getDate();
        dd = dd < 10 ? "0" + dd : dd;
        return yy + "-" + MM + "-" + dd;
      }
    },

    //更新套账方法，获得当前选择的套账信息
    handleEdit(index, row) {
      this.modifyDialogVisible = true; //将显示修改对话框
      this.modifyInfo.id = row.id; //获得当前套账id
      this.modifyInfo.name = row.name; //获得当前套账名字
      this.modifyInfo.salary = row.salary; //获得套账基本薪水
      this.modifyInfo.transport = row.transport; //获得套账交通补助
      this.modifyInfo.meal = row.meal; //获得套账午餐补助
      this.modifyInfo.rate = row.rate; //获得套账比率
      this.modifyInfo.percent = row.percent; //获得套账基数
      this.modifyInfo.createTime = row.createTime; //获得套账创建时间
      this.modifyInfo.award = row.award; //获得套账奖金
    },

    //删除工资套账的方法
    handleDelete(id, row) {
      this.$confirm("此操作将删除 " + row.name + " , 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = { id: row.id };
          //点击确定，判断请求是否成功且返回的数据大于1，成功则返回成功信息
          del(params).then((res) => {
            if (res.code == 200 && res.success == "success" && res.data >= 1) {
              this.$message({
                type: "success",
                message: "删除" + row.name + "成功!",
              });
              this.queryWageList(); //刷新页面信息
            } else {
              this.$message({
                type: "success",
                message: "删除" + row.name + "失败!",
              });
            }
          });
        })
        // 点击取消按钮
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除操作",
          });
        });
    },

    //添加套账方法
    doAddWage() {
      var $that = this;
      //点击添加操作
      add(this.addInfo).then((res) => {
        if (res.code == 200 && res.success == "success") {
          this.queryWageList(); //刷新套账list信息
          this.$message({
            message: "增加 " + $that.addInfo.name + " 成功",
            type: "success",
          });
          $that.addDialogVisible = false; //关闭对话框的显示
          $that.addInfo.name = "";
          $that.addInfo.salary = "";
          $that.addInfo.transport = "";
          $that.addInfo.meal = "";
          $that.addInfo.rate = "";
          $that.addInfo.percent = "";
          $that.addInfo.createTime = "";
          $that.addInfo.award = "";
        }
      });
    },

    //修改套账方法
    doModifyWage() {
      var $that = this;
      //请求JavaAPI,来实现修改套账
      update(this.modifyInfo).then((res) => {
        if (res.code == 200 && res.success == "success") {
          console.log(this.modifyInfo);
          this.queryWageList();
          this.$message({
            message: "修改 " + $that.modifyInfo.name + " 成功",
            type: "success",
          });
          $that.modifyDialogVisible = false;
          $that.modifyInfo.name = "";
          $that.modifyInfo.salary = "";
          $that.modifyInfo.transport = "";
          $that.modifyInfo.meal = "";
          $that.modifyInfo.rate = "";
          $that.modifyInfo.percent = "";
          $that.modifyInfo.createTime = "";
          $that.modifyInfo.award = "";
          $that.modifyInfo.id = 0;
        }
      });
    },

    //监听添加套账的操作，添加完成后退出对话框
    addDialogClosed() {
      this.$refs.addFormRef.resetFields(); //重置对话框信息
    },

    //每页显示的条目个数的1改变
    handleSizeChange(val) {
      this.fromData.pageSize = val; //重新对每页显示条数进行更改
      this.queryWageList(); //重新获得套账list数组的值
    },

    //当前页数的改变
    handleCurrentChange(val) {
      this.fromData.pageIndex = val; //对当前页数进行更改
      this.queryWageList(); //重新获得套账list数组的值
    },
  },
};
</script>
